<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='临期任务' left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}"
			bgColor="#13989a" :placeholder="true"></u-navbar>
		<view class="container">
			<view class="floor"  @click="taskProgress(v.assignTaskId,v.brandPartyId)" v-for="(v,i) in list" :key="i">
				<view>
					<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
						<text>{{v.assignTaskName}}</text>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view class="adress flex" style="justify-content: space-between;margin: 20rpx 0;">
							<text style="
									max-width: 500rpx;
									word-break:keep-all;
									white-space:nowrap;
									overflow:hidden;
									text-overflow:ellipsis;">{{v.assignTaskAddress}}</text>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;font-size: 26rpx">
							<view :style="{'color':color}">
								剩余天数：<text style="color: red;">{{v.days}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				list:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods: {
			taskProgress(assignTaskId,brandPartyId) {
				uni.navigateTo({
					url: `/pages/taskAllocation/index?assignTaskId=${assignTaskId}&brandPartyId=${brandPartyId}`
				})
			},
			getList() {
				uni.$u.http.get('/assign/getAboutCompleteMessageList', {
					params:{
						pageNumber: 1,
						pageSize: 1000,
					}
				}).then(res => {
					this.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 160rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.adress {
			font-size: 26rpx;
		}

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>